<template>
  <div class="orderlist">
    <van-nav-bar
      title="我的订单"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <div v-for="item in orderlist" :key="item.num">
      <van-card
        :price="item.orderPaidmoney"
        :title="item.orderName"
        thumb="http://raf7oogmb.hn-bkt.clouddn.com/qLlgbmkDGGqO1y2tQcyWrg.jpg"
      >
        <template #footer>
          <span v-if="item.orderOrderstatusId==0">
            <van-button size="mini" type="info" @click="gopay(item)">支付</van-button>
          </span>
          <span v-if="item.orderOrderstatusId<3">
            <van-button size="mini" type="info">取消订单</van-button>
          </span>
        </template>
      </van-card>
      <div class="list">
        <van-cell-group inset>
          <van-cell title="订单编号" :value="item.orderId" />
          <van-cell
            title="订单状态"
            :value="item.orderStatus.orderstatusName"
          />
          <van-cell title="订单创建时间" :value="item.orderCreatetime" />
          <van-cell title="支付金额" :value="item.orderPaidmoney" />
          <div v-if="restime(item.orderCreatetime) > 0 && item.orderOrderstatusId==0 ">
            <van-cell title="请尽快支付" :value="item.orderPaidmoney">
              <van-count-down
                :time="restime(item.orderCreatetime)"
                format=" 剩余 mm 分 ss 秒"
              />
            </van-cell>
          </div>
        </van-cell-group>
      </div>
      <hr/>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderlist: [],
      time: 30 * 60 * 1000,
    };
  },

  created: function () {
    this.$axios
      .get("/order/myorder")
      .then((res) => {
        if (res.data.code == 200) {
          this.orderlist = res.data.info;
        }
      })
      .catch((error) => {
        console.log(error);
      });
  },

  methods: {
    onClickLeft: function () {
      this.$router.go(-1);
    },

    restime(createtime) {
      var now = new Date().getTime();
      var endstr = createtime;
      var end_str = endstr.replace(/-/g, "/");
      //-般得到的时间的格式都是：yyyy-MM-ddhh24:mi:ss,所以我就用了这个做例子，是/的格式，就不用replace了
      var start = new Date(end_str).getTime();
      //将字符串转化为时间
      return 30 * 60 * 1000 - (now - start);
    },

    gopay(order){
      let params = new URLSearchParams();
      params.append('outTradeNo', order.orderId);
      params.append('subject', order.orderName);
      params.append('totalAmount', order.orderPaidmoney);
      params.append('description', order.orderName);
      console.log(params);
      this.$axios
      .post("/order/alipay",params)
      .then(res=>{
          console.log(res.data);
          const divForm = document.getElementsByTagName('div');
          if (divForm.length) {
            document.body.removeChild(divForm[0]);
          }
          const div = document.createElement('div');
          console.log(div);
          div.innerHTML = res.data; // data就是接口返回的form 表单字符串
          document.body.appendChild(div);
          document.forms[0].setAttribute('target', '_blank'); // 新开窗口跳转
          document.forms[0].submit();
      })
      .catch(error=>{
        console.log(error);
      });
    },
  },
};
</script>

<style scoped>
.orderlist {
  margin-bottom: 50px;
}
.list {
  background-color: rgb(249, 250, 250);
  margin-bottom: 20px;
}
</style>
